<template>
  <div id="bl-divm">
    <div class="bl-divo">
      <h1 id="bl-title">欢迎来到智慧家园</h1>
        <el-form ref="editFormData" :label-position="labelPosition" label-width="80px" :model="formData" id="bl-for" :rules="rules" status-icon>
          <el-form-item label="账号" class="bl-formData" prop="account">
            <el-input v-model="formData.account"></el-input>
          </el-form-item>
          <el-form-item label="密码" class="bl-formData" prop="password">
            <el-input type="password" v-model="formData.password" show-password></el-input>
          </el-form-item>
          <el-button type="primary" id="bl-submit" @click="login">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import router from "@/router";
import request from "@/utils/request";
import {reactive} from "vue";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Login",
  data(){
    //密码校验 密码不为空
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空,请填写密码'))
      } else {
        callback()
      }
    };
    const validateAcc = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('账号不能为空,请填写账号'))
      } else {
        callback()
      }
    };
    return{
      labelPosition: 'right',
      formData:{
        account:'',
        password:''
      },
      rules : reactive({
        account: [{ validator: validateAcc, trigger: 'blur' }],
        password: [{ validator: validatePass, trigger: 'blur' }],
      })
    }
  },
  methods:{
  login(){
      this.$refs['editFormData'].validate((valid) => {
        if (valid) {
          request.post("http://localhost:8081/seller/Sellerlogin?account="+this.formData.account+"&password="+this.formData.password).then(res=>{
            if(res.flag){
              localStorage.setItem("token",res.data)
              router.push({path: '/background/welcome'});
              this.$message({
                type: 'success',
                message: res.msg
              })
            }else {
              this.$message.error(res.msg);
              this.formData={
                account:"",
                password:""
              }
            }
          })
        } else {
          this.$message.error('账号和密码都不能为空');
          return false
        }
      })
    }
  },
}
</script>

<style>
@import url(../background/bgcss/login.css);
</style>
